<template>
  <div class="restaurant-detail">
    <Navbar />
    <el-page-header @back="goBack" content="返回" class="page-header"></el-page-header>
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :xs="24" :sm="20" :md="16" :lg="12" :xl="10">
        <el-card shadow="always" v-if="restaurant" class="restaurant-card">
          <div slot="header" class="clearfix header">
            <span class="restaurant-name">{{ restaurant.name }}</span>
            <el-rate v-model="restaurant.rating" disabled class="rating"></el-rate>
          </div>
          <img :src="restaurant.image" alt="餐厅图片" class="restaurant-image">
          <el-tabs v-model="activeTab" class="tabs">
            <el-tab-pane label="菜单" name="menu">
              <el-row :gutter="20">
                <el-col :span="8" v-for="(item, index) in restaurant.menu" :key="index" class="menu-item">
                  <el-card :body-style="{ padding: '0px' }" class="menu-card">
                    <img :src="item.image" alt="菜品图片" class="dish-image">
                    <div style="padding: 14px;">
                      <span class="dish-name">{{ item.name }}</span>
                      <div class="bottom clearfix">
                        <time class="time">¥{{ item.price }}</time>
                        <el-button type="text" class="button" @click="addToCart(item)">加入购物车</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane label="评价" name="reviews">
              <div v-for="review in restaurant.reviews" :key="review.id" class="review-item">
                <div class="review-author">{{ review.author }}</div>
                <p class="review-content">{{ review.content }}</p>
                <el-rate v-model="review.rating" disabled class="review-rating"></el-rate>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
        <div v-else class="skeleton-wrapper">
          <el-skeleton :rows="5" animated />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const router = useRouter();
    const activeTab = ref('menu');
    const restaurant = ref(null);

    // 模拟的餐厅数据
    const mockRestaurants = {
      1: {
        id: 1,
        name: '美食天堂',
        image: 'https://img1.baidu.com/it/u=3694467961,2120749926&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1000',
        rating: 4.5,
        menu: [
          { name: '招牌炒饭', price: 30, image: 'https://img1.baidu.com/it/u=3868652711,3719320828&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=667' },
          { name: '红烧肉', price: 60, image: 'https://img0.baidu.com/it/u=78167484,1023387447&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=1522' }
        ],
        reviews: [
          { id: 1, author: '张三', content: '非常好吃！', rating: 5 },
          { id: 2, author: '李四', content: '味道不错，值得推荐！', rating: 4 }
        ]
      },
      2: {
        id: 2,
        name: '星空小屋',
        image: 'https://img0.baidu.com/it/u=2587508774,2092054243&fm=253&fmt=auto&app=120&f=JPEG?w=749&h=500',
        rating: 4.8,
        menu: [
          { name: '星空披萨', price: 80, image: 'http://copyright.bdstatic.com/vcg/creative/201a959f489dfa290efd3edfa59eb4f1.jpg' },
          { name: '星空意面', price: 50, image: 'https://img0.baidu.com/it/u=976323431,1345800895&fm=253&fmt=auto&app=120&f=JPEG?w=1169&h=800' }
        ],
        reviews: [
          { id: 1, author: '王五', content: '环境很好，食物也很棒！', rating: 5 },
          { id: 2, author: '赵六', content: '服务态度非常好！', rating: 4.5 }
        ]
      }
    };

    const fetchRestaurantData = (id) => {
      // 使用模拟数据代替API请求
      restaurant.value = mockRestaurants[id] || null;
    };

    onMounted(() => {
      if (route.params.id) {
        fetchRestaurantData(route.params.id);
      }
    });

    watch(() => route.params.id, (newId) => {
      if (newId) {
        fetchRestaurantData(newId);
      }
    });

    const goBack = () => {
      router.back();
    };

    const addToCart = (item) => {
      // 实现加入购物车逻辑
      console.log(`${item.name} 已加入购物车`);
    };

    return {
      activeTab,
      restaurant,
      goBack,
      addToCart
    };
  }
};
</script>

<style scoped>
.restaurant-detail {
  padding: 20px;
  background-color: #f0f2f5;
}

.page-header {
  margin-bottom: 20px;
}

.restaurant-card {
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px;
  background-color: #f5f7fa;
}

.restaurant-name {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.rating {
  margin-left: 10px;
}

.restaurant-image {
  width: 100%;
  height: auto;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.tabs {
  margin-top: 20px;
}

.menu-item {
  margin-bottom: 20px;
}

.menu-card {
  transition: transform 0.3s;
}

.menu-card:hover {
  transform: translateY(-5px);
}

.dish-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.dish-name {
  font-size: 18px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.time {
  font-size: 14px;
  color: #909399;
}

.button {
  padding: 8px 16px;
  background-color: #409eff;
  color: #fff;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.button:hover {
  background-color: #66b1ff;
}

.review-item {
  padding: 20px;
  border-bottom: 1px solid #ebeef5;
}

.review-author {
  font-weight: bold;
  color: #303133;
  margin-bottom: 5px;
}

.review-content {
  color: #606266;
  margin-bottom: 10px;
}

.review-rating {
  margin-top: 5px;
}

.skeleton-wrapper {
  padding: 20px;
}
</style>